<template>
  <view class="content">
    <mescroll-uni
      ref="mescrollRef"
      @init="mescrollInit"
      @up="upCallback"
      :up="upOption"
      :down="{ use: false }"
    >
      <view class="out-content">
        <view class="section-1">
          <view class="section-body">
            <view
              :class="`item`"
              v-for="item in board"
              :key="item.name"
              @click="screening(item.name)"
            >
              <view class="shape" v-if="item.right"></view>
              <view class="shape2" v-if="item.bottom"></view>
              <view class="top">{{ item.name }}</view>
              <view class="bottom"
                >{{ item.count }}<text>{{ item.unit }}</text></view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="section-0">
        <view class="section-body">
          <view class="form">
            <view class="form-item">
              <view class="label">项目名称</view>
              <view class="shape"></view>
              <view class="input">
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  placeholder="项目名称"
                  v-model="form.project_name"
                ></u--input>
              </view>
            </view>
            <!-- <view class="form-item">
              <view class="label">作业票名称</view>
              <view class="shape"></view>
              <view class="input">
                <u--input
                  placeholderClass="input-placeholder"
                  class="input-body"
                  placeholder="作业票名称"
                  v-model="form.ticket_name"
                ></u--input>
              </view>
            </view> -->
            <view class="actions">
              <view class="action" @click="handleResetForm()">
                <text>重</text>
                <text>置</text>
              </view>
              <view class="action search" @click="handleSearch()">
                <text>查</text>
                <text>询</text>
              </view>
            </view>
          </view>
          <view class="list">
            <view class="item" v-for="(item, index) in list" :key="index">
              <view
                class="parent"
                @click="expandChange(item.id, item.id, 2, index)"
              >
                <view class="action">
                  <view class="iconfont icon-xiangyou1"></view>
                </view>
                <view class="name"
                  >{{ index + 1 }}.{{ item.project_name }}</view
                >
                <view class="count"
                  >{{ item.total ? item.total : 0 }}<text>个</text></view
                >
              </view>
              <view class="child" v-if="expandList.indexOf(item.id) !== -1">
                <view
                  class="child-item"
                  v-for="(item2, idx) in item.children"
                  :key="idx"
                >
                  <view
                    class="top"
                    @click="expandChange(`${index}-${idx}`, item2.id, 3)"
                  >
                    <view
                      :class="`action ${
                        expandList.indexOf(`${index}-${idx}`) !== -1
                          ? 'action__active'
                          : ''
                      }`"
                    >
                      <view class="iconfont icon-xiangyou1"></view>
                    </view>
                    <view class="name">
                      {{ index + 1 }}-{{ idx + 1 }}.{{ item2.project_name }}
                    </view>
                    <view class="count"
                      >{{ item2.total ? item2.total : 0 }}<text>个</text></view
                    >
                  </view>
                  <view
                    class="grad"
                    v-if="expandList.indexOf(`${index}-${idx}`) !== -1"
                  >
                    <view
                      class="grad-item"
                      @click="go(item3)"
                      v-for="(item3, index) in item2.children"
                      :key="item3.id + index"
                    >
                      <view class="details">
                        <view class="grad-top">
                          <span> 作业编号：{{ item3.ticket_no }} </span>
                          <span class="center-right">
                            施工人数：{{ item3.construction_personnel_num }}
                          </span>
                        </view>
                        <view class="grad-conter">
                          <span class="conter-left"
                            >计划开始时间：{{ item3.planned_start_time }}</span
                          >
                          <span class="conter-right">
                            计划结束时间：{{ item3.planned_end_time }}
                          </span>
                        </view>
                        <view class="grad-center">
                          <span class="center-left">
                            实际开始时间：{{ item3.actual_start_time }}
                          </span>
                          <span class="center-right">
                            实际结束时间：{{ item3.actual_end_time }}
                          </span>
                        </view>
                        <view class="grad-bottom">
                          <span class="bottom-left">
                            工作负责人：{{ item3.work_charge_person }}
                          </span>
                          <span class="bottom-right">
                            安全监护人：{{ item3.safety_guardian_person }}
                          </span>
                        </view>
                        <view class="operation">
                          <view class="img">
                            <text
                              class="label"
                              @click="
                                goto(
                                  `/pages/statistics/'safety/ticket/details/index`
                                )
                              "
                              >作业票详情</text
                            >
                          </view>
                          <!-- <view class="img">
												<text class="label"
													@click="goto()">施工方案</text>
											</view> -->
                          <!-- <view class="img">
												<text class="label"
													@click="goto()">站班会视频</text>
											</view> -->
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import {
  ticketIndexApi,
  ticketChildListApi,
  statisticalTicket,
} from "@/api/statistics.js";
export default {
  data() {
    return {
      form: {
        ticket_name: "",
        project_name: "",
      },
      board: [
        {
          name: "全部",
          count: 0,
          right: true,
          bottom: true,
          type: "risk_num",
        },
        {
          name: "执行中",
          count: 0,
          right: true,
          bottom: true,
          type: "risk_num_2",
        },
        {
          name: "暂停中",
          count: 0,
          bottom: true,
          right: true,
          type: "risk_num_3",
        },
        {
          name: "已完成",
          count: 0,
          right: false,
          bottom: true,
          type: "risk_num",
        },
      ],
      contentList: [
        {
          name: "作业票详情",
          id: 1,
          path: "/pages/statistics/'safety/ticket/details/index",
        },
        {
          name: "施工方案",
          id: 2,
          path: "",
        },
        {
          name: "站班会视频",
          id: 3,
          path: "",
        },
      ],
      process_status: "全部",
      list: [],
      // childList: [],
      expandList: [],
      mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
      upOption: {
        textNoMore: "-- 没有更多了 --",
      },
      pageSize: 20,
      project_id: 0,
    };
  },

  methods: {
    handleExport() {
      let name = "履职记录";
      let arr = [
        [
          {
            content: "姓名",
            type: "text",
            width: "200px",
            height: "25px",
            fontSize: "16px",
          },
          {
            content: "项目",
            type: "text",
            width: "200px",
            height: "25px",
            fontSize: "16px",
          },
          {
            content: "打卡次数",
            color: "blue",
            type: "text",
            width: "200px",
            height: "25px",
            fontSize: "16px",
          },
        ],
      ];
      this.list.forEach((item) => {
        let _arr = [
          {
            content: item.user_name,
            type: "text",
            width: "200px",
            height: "25px",
            fontSize: "16px",
          },
          {
            content: item.project_name,
            type: "text",
            width: "200px",
            height: "25px",
            fontSize: "16px",
          },
          {
            content: item.total,
            type: "text",
            width: "200px",
            height: "25px",
            color: "blue",
            fontSize: "16px",
          },
        ];
        arr.push(_arr);
      });
      doExport(name, arr, (res) => {});
    },
    goVideo(item) {
      uni.navigateTo({
        url: `/pages/statistics/safety/ticket/video/index?project_id=${item.project_id}&ticket_id=${item.ticket_id}`,
      });
    },
    preview(url) {
      uni.navigateTo({
        url: "/pages/pdf/index?url=" + url,
      });
    },
    go(item) {
      let params = {
        project_id: item.project_id,
        project_name: item.project_name,
        id: item.id,
      };
      uni.navigateTo({
        url:
          "/pages/statistics/safety/ticket/details/index?params=" +
          JSON.stringify(params),
      });
    },
    async screening(params) {
      this.process_status = params;
      const { data } = await ticketIndexApi({
        ...this.form,
        pageSize: this.pageSize,
        name: this.form.project_name,
        process_status: this.process_status,
      });
      this.list = data.data.data;
      this.mescroll.resetUpScroll();
    },

    handleResetForm() {
      for (let key in this.form) {
        this.form[key] = "";
      }
      this.mescroll.resetUpScroll();
      this.mescroll.scrollTo(0, 0);
    },
    handleSearch() {
      this.mescroll.resetUpScroll();
      this.mescroll.scrollTo(0, 0);
    },
    expandChange(id, project_id, deep, index) {
      const idx = this.expandList.indexOf(id);
      if (idx !== -1) {
        this.expandList.splice(idx, 1);
      } else {
        this.expandList.push(id);
      }
      if (project_id && deep === 3) {
        if (!this.list[id.split("-")[0]].children[id.split("-")[1]].children) {
          this.fetchInfo(id, project_id);
        }
      }
    },
    async fetchInfo(id, project_id) {
      uni.showLoading({ title: "加载中..." });
      const { data } = await ticketChildListApi({
        id: project_id,
        process_status: this.process_status,
      });
      console.log(data);
      if (data.code === 1) {
        let dep = JSON.parse(JSON.stringify(this.list));
        dep[id.split("-")[0]].children[id.split("-")[1]].children = data.data;
        this.list = dep;
      }
      uni.hideLoading();
    },
    // async getTicketChildList(params) {
    //   const data = await ticketChildListApi({
    //     id: params,

    //   });
    // 	this.list.map(item=>{
    // 		item.children.map(item2=>{
    // 			if(item2.id===params){
    // 				item2.childList=data.data.data
    // 			}
    // 		})
    // 	})
    // },
    /*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    /*上拉加载的回调*/

    goto(path) {
      uni.navigateTo({
        url: path,
      });
    },

    async upCallback(page) {
      const { data } = await ticketIndexApi({
        ...this.form,
        page: page.num,
        pageSize: this.pageSize,
        name: this.form.project_name,
        process_status: this.process_status,
      });
      const data2 = await statisticalTicket();
      this.board[0].count = data2.data.data.ticket_total;
      this.board[1].count = data2.data.data.ticket_executing;
      this.board[2].count = data2.data.data.ticket_stop;
      this.board[3].count = data2.data.data.ticket_finsh;
      console.log(data);
      if (data.code === 1 && data.data.length != 0) {
        // 接口返回的当前页数据列表 (数组)
        let arr = [];
        for (let key in data.data.data) {
          arr.push(data.data.data[key]);
        }
        let curPageData = arr;
        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
        let curPageLen = curPageData.length;
        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
        let totalPage = data.data.data.last_page;
        // 设置列表数据
        if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
        this.list = this.list.concat(curPageData); //追加新数据
        // 请求成功,隐藏加载状态
        this.mescroll.endByPage(curPageLen, totalPage);
        setTimeout(() => {
          this.mescroll.endSuccess(curPageLen);
          // this.mescroll.endSuccess(1);
        }, 20);
      } else {
        //  请求失败,隐藏加载状态
        this.mescroll.endErr();
      }
    },
  },
  onLoad(data) {
    if (data.type) {
      this.type = data.type;
    }
    this.curd = data.curd ? data.curd : 0;
    if (data.project_id) {
      this.project_id = data.project_id;
    }
  },
};
</script>

<style lang="scss" scoped>
.out-content {
  background-color: #2e5efe;
  .section-1 {
    width: 100%;
    background-color: #1534ce;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    overflow: hidden;
    height: 159rpx;
    .section-body {
      width: 670rpx;
      margin-left: 40rpx;
      margin-right: 40rpx;
      padding-bottom: 50rpx;
      padding-top: 20rpx;
      background-color: #1534ce;
      background-size: cover;
      background-repeat: no-repeat;
      overflow: hidden;
      box-sizing: border-box;

      .item {
        width: 25%;
        float: left;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        height: 100rpx;
        position: relative;
        padding-top: 20rpx;
        padding-bottom: 20rpx;

        .shape {
          width: 4rpx;
          height: 84rpx;
          background-image: linear-gradient(
            rgba(#3658f2, 0.3) 0%,
            #3658f2 30%,
            #3658f2 70%,
            rgba(#3658f2, 0.3) 100%
          );
          position: absolute;
          right: 0;
          top: 28rpx;
        }

        .shape2 {
          height: 4rpx;
          width: 172rpx;
          background-image: linear-gradient(
            90deg,
            rgba(#3658f2, 0.3) 0%,
            #3658f2 30%,
            #3658f2 70%,
            rgba(#3658f2, 0.3) 100%
          );
          position: absolute;
          left: 0;
          right: 0;
          margin: 0 auto;
          bottom: -2rpx;
        }

        .top {
          width: 100%;
          text-align: center;
          font-size: 16rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #95c4fa;
        }

        .bottom {
          width: 100%;
          text-align: center;
          font-size: 58rpx;
          font-weight: bold;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #ffde00;

          text {
            font-size: 26rpx;
            font-weight: normal;
            letter-spacing: 0rpx;
            color: #87c6ff;
          }
        }
      }
    }
  }
}

.section-0 {
  z-index: 10;
  background-color: #1534ce;
  // background-color: #2e5efe;
  .section-body {
    width: 100%;
    height: 100%;
    border-top-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    background-color: #fff;
    overflow: hidden;
    .tab {
      width: 100%;
      height: 80rpx;
      @include clear();
      background-color: #1534ce;
      .item {
        width: 33.33%;
        float: left;
        height: 80rpx;
        background-color: #1534ce;
        position: relative;
        .label {
          height: 80rpx;
          line-height: 80rpx;
          position: relative;
          z-index: 10;
          box-sizing: border-box;
          text-align: center;
          width: 100%;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: #ffffff;
        }
        .shape {
          z-index: 1;
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          bottom: 0;
          left: -50rpx;
          background: #000;
          display: none;
          background-color: #fff;
          overflow: hidden;
          .shape-body {
            width: 50rpx;
            height: 50rpx;
            background-color: #1534ce;
            border-bottom-right-radius: 40rpx;
          }
        }
        .shape-mirrow {
          z-index: 1;
          left: 0;
          display: none;
          .shape-body {
            border-bottom-right-radius: 0rpx;
            border-bottom-left-radius: 40rpx;
          }
        }
      }
      .item__active {
        border-top-left-radius: 40rpx;
        border-top-right-radius: 40rpx;
        background-color: #fff;
        .label {
          color: #46464a;
        }
        .shape {
          display: block;
        }
        .shape-mirrow {
          display: none;
        }
      }
      .item__active_next {
        border-bottom-right-radius: 50rpx;
        .shape {
          display: none;
        }
        .shape-mirrow {
          display: block;
        }
      }
    }
  }
  .list {
    width: 670rpx;
    box-sizing: border-box;
    margin-left: 40rpx;
    border-top: 2rpx solid #d8e4f2;

    .item {
      width: 100%;
      border-bottom: solid 2rpx #f2f2f0;

      .parent {
        width: 100%;
        @include clear();
        .name {
          width: 550rpx;
          line-height: 30rpx;
          padding: 26rpx 0;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 2rpx;
          color: #3b3c40;
          float: left;
        }

        .count {
          float: right;
          min-width: 50rpx;
          height: 46rpx;
          margin-top: 18rpx;
          border-radius: 28rpx;
          line-height: 46rpx;
          text-align: center;
          font-size: 23rpx;
          font-weight: bold;
          padding: 5rpx;
          color: #395cf5;
          background: #ffde00;
          // margin-right: 40rpx;
          text {
            font-size: 16rpx;
          }
        }

        .action {
          float: left;
          width: 32rpx;
          margin-right: 18rpx;
          line-height: 82rpx;
          text-align: center;
          color: #3b3c40;

          .iconfont {
            font-size: 32rpx;
            transition: 0.2s ease;
            transform: rotate(90deg);
          }
        }
      }
      .child {
        width: 750rpx;
        margin-left: -40rpx;
        background: #f2f2fa;

        .child-item {
          width: 100%;
          border-bottom: 2rpx solid #e3e8f5;
          box-sizing: border-box;
          padding-left: 40rpx;
          @include clear();
          &:last-child {
            border-bottom: none;
          }

          .top {
            width: 100%;
            overflow: hidden;
            box-sizing: border-box;
            // padding-left: 40rpx;
            display: flex;
            align-items: center;
            padding-right: 40rpx;
            .action {
              width: 32rpx;
              line-height: 82rpx;
              float: left;
              text-align: center;
              color: #7f98ae;
              margin-right: 18rpx;
              .iconfont {
                font-size: 32rpx;
                transition: 0.2s ease;
                transform: rotate(90deg);
              }
            }
            .name {
              float: left;
              width: calc(100% - 50rpx);
              box-sizing: border-box;
              padding: 26rpx 0;
              font-size: 26rpx;
              color: #3b3c40;
              font-size: 26rpx;
            }
            .count {
              // float: right;
              min-width: 60rpx;
              height: 46rpx;
              // margin-top: 18rpx;
              border-radius: 28rpx;
              line-height: 46rpx;
              text-align: center;
              font-size: 23rpx;
              font-weight: bold;
              padding: 5rpx;
              color: #395cf5;
              background: #ffde00;
              // margin-right: 40rpx;
              text {
                font-size: 16rpx;
              }
            }
            .desc {
              float: left;
              width: 100%;
              font-size: 16rpx;
              color: #9b9b9b;
              box-sizing: border-box;
              padding-left: 50rpx;
              padding-bottom: 26rpx;
              text {
                margin-right: 30rpx;
                display: inline-block;
              }
            }
            .action {
              width: 32rpx;
              line-height: 82rpx;
              float: left;
              text-align: center;
              color: #7f98ae;
              margin-right: 18rpx;
              .iconfont {
                font-size: 32rpx;
                transition: 0.2s ease;
                transform: rotate(90deg);
              }
            }
          }
        }
      }

      .grad {
        width: 750rpx;
        margin-left: -40rpx;
        background: #d9d9e2;
        .grad-item {
          width: 100%;
          border-bottom: 1px solid #e3e8f5;
          &:last-child {
            border-bottom: none;
          }
          .details {
            width: 100%;
            font-size: 23rpx;
            .grad-top {
              width: 100%;
              color: #7f98ae;
              overflow: hidden;
              display: flex;
              justify-content: space-between;
              box-sizing: border-box;
              padding-left: 40rpx;
              padding-top: 28rpx;
              padding-right: 40rpx;
            }
            .grad-conter {
              display: flex;
              justify-content: space-between;
              color: #7f98ae;
              width: 100%;
              overflow: hidden;
              box-sizing: border-box;
              padding-left: 40rpx;
              padding-top: 28rpx;
              padding-right: 40rpx;
            }
            .grad-center {
              width: 100%;
              color: #7f98ae;
              overflow: hidden;
              box-sizing: border-box;
              padding-left: 40rpx;
              padding-top: 28rpx;
              padding-right: 40rpx;
              display: flex;
              justify-content: space-between;
            }
            .grad-bottom {
              width: 100%;
              color: #7f98ae;
              overflow: hidden;
              box-sizing: border-box;
              padding-left: 40rpx;
              padding-top: 28rpx;
              padding-right: 40rpx;
              display: flex;
              justify-content: space-between;
            }
            .operation {
              display: flex;
              justify-content: space-between;
              font-size: 31rpx;
              color: #1534ce;
              padding: 28rpx 40rpx;
              .details-btn {
                width: 77rpx;
                height: 48rpx;
                text-align: center;
                line-height: 44rpx;
                font-size: 26rpx;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0rpx;
                color: #1534ce;
              }
            }
          }
        }
      }
      .action__active {
        .iconfont {
          transform: rotate(-90deg) !important;
        }
      }
    }

    .item__expand {
      .parent {
        .action {
          .iconfont {
            transform: rotate(-90deg);
          }
        }
      }

      .child {
        box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.05) inset;
      }
    }
  }
  .actions {
    width: 100%;
    height: 50rpx;
    margin-top: 29rpx;
    padding-bottom: 40rpx;
    display: flex;
    justify-content: space-between;
    .action {
      width: 288rpx;
      height: 48rpx;
      background-color: #395cf5;
      border-radius: 20rpx;
      text-align: center;
      line-height: 48rpx;
      font-size: 26rpx;
      font-weight: normal;
      font-stretch: normal;
      color: #ffffff;
      text {
        &:first-child {
          margin-right: 20rpx;
        }
      }
    }
    .search {
      background-color: #1534ce;
    }
  }
  .form {
    width: 100%;
    padding: 0 75rpx;
    padding-top: 40rpx;
    box-sizing: border-box;

    .form-time {
      width: 600rpx;
      min-height: 48rpx;
      margin: 0 auto;
      margin-bottom: 9rpx;

      @include clear;
      .label {
        float: left;
        width: 134rpx;
        height: 48rpx;
        text-align: center;
        line-height: 44rpx;
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #1534ce;
      }
      .wrapper {
        float: left;
        width: calc(100% - 134rpx);
        line-height: 48rpx;
        .item {
          float: left;
          display: inline-block;
          height: 48rpx;
          border-radius: 35rpx;
          padding: 0 20rpx;
          background-color: #395cf5;
          text-align: center;
          font-size: 26rpx;
          line-height: 48rpx;
          color: #fff;
          margin-left: 10rpx;
          transition: 0.3s ease;
          margin-bottom: 16rpx;
        }
        .item__active {
          background-color: #1534ce;
        }
      }
    }
    .form-item {
      width: 600rpx;
      height: 48rpx;
      border-radius: 20rpx;
      border: solid 2rpx #1534ce;
      margin: 0 auto;
      margin-bottom: 25rpx;
      &:last-child {
        margin-bottom: 34rpx;
      }
      @include clear();
      .label {
        float: left;
        width: 134rpx;
        height: 48rpx;
        text-align: center;
        line-height: 44rpx;
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #1534ce;
      }
      .shape {
        width: 3rpx;
        height: 32rpx;
        background-color: #7f98ae;
        float: left;
        margin-top: 8rpx;
      }
      .input {
        float: left;
        width: calc(100% - 134rpx - 3rpx);
        .input-body {
          box-sizing: border-box;
          width: 100%;
          height: 44rpx;
          padding: 0 !important;
          border: none;
          padding-left: 30rpx !important;
          padding-right: 30rpx !important;
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.7);
        }
        .input-placeholder {
          font-size: 26rpx;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rpx;
          color: rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
}
</style>
